<template>
	<view class="mine-container">
		<!-- 用户信息卡片 -->
		<view class="user-info">
			<view class="avatar"  @click="navigateTo({path:'/pages/setUser/setUser'})">
				<image :src="userInfo.avatar?userInfo.avatar:'/static/64.jpg'" mode="aspectFit"></image>
			</view>
			<view class="user-detail">
				<view class="nickname">
					<text @click="navigateTo({path:'/pages/setUser/setUser'})">{{userInfo.nickname=='用户'?'点击填写昵称':userInfo.nickname}}</text>
					<text class="status" v-if="userInfo.memberStatus!=1">未开通</text>
					<text class="status" v-else>特权会员</text>
				</view>
				<view class="register-time">注册时间:{{userInfo.createTime}}</view>
			</view>
		</view>
		<!-- 用户等级信息 -->
		<view class="user-box">
			<!-- 用户等级 -->
			<view class="user-level">
				<view class="level-info">
					<text class="level-text">{{userInfo.memberStatus==1?'特级会员':'普通用户'}}</text>
					<view class="privilege-center" @click="$refs.openP.open()">特权中心</view>
				</view>
				<view class="privilege-tip">{{userInfo.memberStatus==1?'您已开通特权':'开通特权享受专属福利'}}</view>
			</view>

			<!-- 账户余额信息 -->
			<view class="account-balance">
				<view class="balance-item">
					<text class="balance-title" @click="navigateTo({path:'/pages/wallet/wallet'})">奖励钱包</text>
					<text class="balance-amount">0.00</text>
				</view>
				<view class="balance-item" @click="navigateTo({path:'/pages/myBack/myBack'})">
					<view class="balance-title">
					    <text>{{userInfo.memberStatus==1?'特级会员':'普通用户'}}</text>
					    <view class="waiting" :style="{width:userInfo.memberStatus==1?'135rpx':'90rpx'}">待返{{userInfo.memberStatus==1?showPrice:''}}</view>
					</view>
					<text class="balance-amount">{{userInfo.memberStatus==1?showPrice:'0.00'}}</text>
				</view>
				<view class="balance-item">
					<text class="balance-title">积分钱包</text>
					<text class="balance-amount">0.00</text>
				</view>
			</view>
		</view>


		<!-- 功能菜单 -->
		<view class="function-menu">
			<view class="menu-row">
				<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="navigateTo(item)">
					<view class="menu-icon" :style="{color: item.color}">
						<image class="iconfont" :src="item.icon" mode="widthFix"></image>
					</view>
					<text class="menu-text">{{item.title}}</text>
				</view>
			</view>
		</view>

		<!-- 服务菜单列表 -->
		<view class="service-list">
			<view class="service-item" v-for="(item, index) in serviceItems" :key="index"
				@click="navigateTo(item)">
				<view class="service-left">
					<view class="service-icon">
						<image class="iconfont" :src="item.icon"></image>
					</view>
					<text class="service-title">{{item.title}}</text>
				</view>
			    <uni-icons type="right" color="#000" size="25" />
			</view>
		</view>
		<cenPupop ref="cenP" />
		<cosPupop ref="openP" />
		<uni-popup ref="conPopup" type="center">
			<view class="pop-box">
				<uni-icons class="icons" type="closeempty" color="#000" size="30" @click="$refs.conPopup.close()"/>
				<view class="title">
					联系客服
				</view>
				<text class="tips">LOGO</text>
				<view class="images">
					<image :src="kefuimg" mode="widthFix"></image>
				</view>
				<view class="bths">
					识别二维码，添加专属客服
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * 个人中心页面
	 * @description 显示用户个人信息、账户余额和功能菜单
	 */
	import cosPupop from "@/components/cos-pupop/cos-pupop.vue"
	import cenPupop from "@/components/cen-pupop/cen-pupop.vue"
	export default {
		components:{cenPupop,cosPupop},
		data() {
			return {
				kefuimg:"",
				showPrice:0,
				/**
				 * 功能菜单项
				 * @type {Array}
				 */
				menuItems: [{
						title: '奖励明细',
						icon: '/static/images/l_1.png',
						path: '',
						color: '#4a89dc'
					},
					{
						title: '交易记录',
						icon: '/static/images/l_2.png',
						path: '',
						color: '#4a89dc'
					},
					{
						title: '我的机具',
						icon: '/static/images/l_3.png',
						path: '',
						openDit:'cenP',
						color: '#4a89dc'
					},
					{
						title: '积分明细',
						icon: '/static/images/l_4.png',
						path: '',
						color: '#4a89dc'
					}
				],

				/**
				 * 服务菜单项
				 * @type {Array}
				 */
				serviceItems: [{
						title: '代理申请',
						icon: '/static/images/m_1.png',
						path: '',
						color: '#4a89dc'
					},
					{
						title: '联系客服',
						icon: '/static/images/m_2.png',
						path: '/pages/service/contact',
						openDit:'conPopup',
						color: '#4a89dc'
					},
					{
						title: '意见反馈',
						icon: '/static/images/m_3.png',
						path: '/pages/feedback/feedback',
						color: '#4a89dc'
					},
					{
						title: '设置',
						icon: '/static/images/m_4.png',
						path: '/pages/setting/setting',
						color: '#4a89dc'
					}
				]
			};
		},
		computed:{
			 userInfo(){
				 return this.$store.state.userInfo
			 }
		},
		onLoad() {
			 this.$api('/app/getAgreement','GET',{code:"member_price"}).then(res=>{
				  this.showPrice = Number(res.data.data).toFixed(2)
			 })
		},
		methods: {
			/**
			 * 导航到指定页面
			 * @param {String} path - 页面路径
			 */
			async navigateTo(item) {
				if(!item.path&&!item.openDit){
					uni.showToast({
						icon:'none',
						title: '暂未开放'
					});
				}else{
					if(item.openDit){
						if(item.title=='我的机具'){
							if(this.$store.state.userInfo.memberStatus){
								uni.navigateTo({
									url:"/pages/myBack/myBack"
								})
							}else{
								this.$refs.cenP.open()
							}
						}else{
						    let {data:res} = await this.$api('/app/getAgreement','GET',{code:"customer_service"})
							this.kefuimg = res.data
							this.$refs[item.openDit].open()
						}
					}else{
						uni.navigateTo({
							url:item.path
						})
					}
				}
			},

			/**
			 * 切换底部标签页
			 * @param {String} tab - 标签页标识
			 */
			switchTab(tab) {
				if (tab === 'home') {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else if (tab === 'privilege') {
					uni.switchTab({
						url: '/pages/privilege/index'
					});
				}
				// 当前已在"我的"页面，无需切换
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		padding-top: 100rpx;
		background-image: url("/static/images/n_vip.png");
		background-size: 100%;
		background-repeat: no-repeat;
		// 用户信息卡片样式
		.user-info {
			padding: 30rpx;
			display: flex;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				image {
					background-color: #fff;
					width: 100%;
					height: 100%;
				}
			}

			.user-detail {
				margin-left: 20rpx;
				flex: 1;

				.nickname {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
                    color: #333333;
					.status {
						margin-left: 20rpx;
						font-size: 24rpx;
						color: #529AEE;
						background-color: #fff;
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						font-weight: 550;
					}
				}

				.register-time {
					font-size: 26rpx;
					color: #3D3D3D;
					font-weight: 400;
				}
			}
		}

		// 用户等级卡片样式
		.user-box {
			border: 1rpx solid #d5e3f5;
			border-radius: 20rpx;
            background-image: url('/static/images/p_bgs.png');
			background-size: 100%;
			background-position: 60rpx;
			// 用户等级信息样式
			.user-level {
				padding:30rpx;
				border-bottom: 1rpx solid #d5e3f5;
				.level-info {
					display: flex;
					align-items: center;
					gap: 10rpx;
					margin-bottom: 20rpx;

					.level-text {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}

					.privilege-center {
						cursor: pointer;
						padding: 6rpx 15rpx;
						font-size: 24rpx;
						background: linear-gradient(360deg, #549BEE,#83B7F3);;
						border-radius: 30rpx;
						color: #fff;
						box-shadow: rgba(255, 255, 255, 1) 0px 0px 5rpx 1rpx inset,
						rgba(0, 0, 0, 0.12) 0px 0px 8rpx 2rpx;
					}
				}

				.privilege-tip {
					font-size: 38rpx;
					color: #549BEE;
					font-weight: bold;
					text-align: center;
				}
			}

			// 账户余额信息样式
			.account-balance {
				display: flex;
				padding: 30rpx 0rpx;
                gap:60rpx;
				.balance-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
                    
					.balance-title {
						font-size: 30rpx;
						color: #000;
						margin-bottom: 20rpx;
						margin-top: 20rpx;
						display: flex;
						align-items: center;
                        position: relative;
						font-weight: 400;
						.waiting {
							padding: 6rpx 15rpx;
							font-size: 22rpx;
							background: linear-gradient(360deg, #549BEE,#83B7F3);;
							border-radius: 30rpx;
							color: #fff;
							box-shadow: rgba(255, 255, 255, 1) 0px 0px 5rpx 1rpx inset,
							rgba(0, 0, 0, 0.12) 0px 0px 8rpx 2rpx;
							position: absolute;
							left: 125rpx;
							top: -5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.balance-amount {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
					}
				}
			}
		}

		// 功能菜单样式
		.function-menu {
			width: 100%;
			background: linear-gradient(-10deg, rgba(255,255,255,0.5) 0%, rgba(235,245,255,0.5) 100%);
			border: 1rpx solid #d5e3f5;
			border-radius: 20rpx;
			padding: 20rpx;
          
			.menu-row {
				display: flex;
				justify-content: space-between;

				.menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;
					.menu-icon {
						width: 100%;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.iconfont{
							width: 90%;
						}
					}

					.menu-text {
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}

		// 服务菜单列表样式
		.service-list {
			border:1rpx solid #d5e3f5;
			border-radius: 20rpx;
			overflow: hidden;

			.service-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #d5e3f5;

				&:last-child {
					border-bottom: none;
				}

				.service-left {
					display: flex;
					align-items: center;

					.service-icon {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;
						margin-right: 20rpx;
						.iconfont{
							width: 100%;
							height: 100%;
						}
					}

					.service-title {
						font-size: 30rpx;
						color: #333;
					}
				}
				.iconfont-right{
						width: 60rpx;
						height: 60rpx;
				}
			}
		}

	}
	.pop-box {
		width: 85vw;
		padding-bottom: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		.title{
			width: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 35rpx;
			height: 90rpx;
			line-height: 160rpx;
			background: linear-gradient(to bottom, rgba(82, 154, 238, 0.3) 20%, rgba(82, 154, 238, .1), rgba(82, 154, 238, 0.01));
			margin-bottom: 30rpx;
		}
		.icons{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.tips{
			width: 60%;
			border-radius: 16rpx;
			height: 100rpx;
			color:#4a89dc ;
			background-color: rgba(82, 154, 238, 0.4);
			text-align: center;
			margin: 30rpx auto;
			font-weight: bold;
			line-height: 100rpx;
			font-size: 40rpx;
		}
		.images{
			width: 80%;
			margin: 20rpx auto;
			image{
				width: 100%;
			}
		}
		.bths{
			width: 100%;
			text-align: center;
			color: #000;
			font-size: 40rpx;
		}
	 }
</style>